<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="item of list" :key="item.id">
    	<img class="swiper-img" :src="item.imgUrl" alt="" />
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props:{
  	list:Array
  },
  data(){
  	return{
			swiperOption:{
				pagination:'.swiper-pagination',
				loop:true,
				autoplay:3000,
				autoplayDisableOnInteraction:false
			},

  	}
  },
  computed:{
  	showSwiper(){
  		return this.list.length
  	}
  }

}
</script>

<style lang="less" scoped>

  .wrapper{width:100%;height:0;overflow: hidden;padding-bottom:31.5%;background:#eee}
  .swiper-img{width:100%;}
</style>
